<script setup lang="ts">
import { SomeComponent } from '#components'

definePageMeta({
  title: '组件',
  description: '组件描述', 
  keepalive: true // 页面缓存, Nuxt 将自动将您的页面包装在 Vue <KeepAlive> 组件 中
})

// 如果你想使用 Vue 的 <component :is="someComputedComponent"> 语法，你需要使用 Vue 提供的 resolveComponent 辅助函数，或直接从 #components 导入组件并将其传递给 is 属性。
const MyComponent = resolveComponent('SomeComponent')

const clickable = ref(false)

preloadRouteComponents('/demo/components/preload-route') // 预加载路由组件

// 这对于完全静态生成的站点（SSG）特别有用
prerenderRoutes(['/demo/components/preload-route']) // 预渲染路由组件，预渲染的组件将在构建时被静态地生成为 HTML 字符串，这可以提高页面的加载速度。

const handleClickGo = async() => {
  await new Promise(resolve => {
    setTimeout(() => {
      resolve(true)
    }, 1000)
  })
  navigateTo('/demo/components/preload-route') // 跳转到预加载的路由组件
}
</script>

<template>
  <div>
    <UButton
      @click="
        () => {
          clickable = !clickable;
        }
      "
    >
      切换组件
    </UButton>
    <component :is="clickable ? MyComponent : 'div'" />
    <component :is="SomeComponent" />
    <!-- 通过使用 Lazy 前缀，你可以推迟加载组件代码，直到需要时才加载，这有助于优化你的 JavaScript 包大小 -->
    <LazySomeComponent v-if="clickable" />
    <!-- 这个组件只会在客户端渲染 -->
    <ClientComponent />
    <UButton>
      <NuxtLink to="/demo/components/about"> 跳转到子页面about </NuxtLink>
    </UButton>
    <UButton>
      <NuxtLink to="/demo/components/contact"> 跳转到子页面contact </NuxtLink>
    </UButton>
    <UButton @click="handleClickGo">
      跳转到预加载的路由页面preload-route
    </UButton>
  </div>
</template>
